<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .video-container {
            margin: 20px 0;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
        }
        video {
            width: 100%;
            max-width: 600px;
            height: auto;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <h1>视频播放测试页面</h1>
    
    <div class="video-container">
        <h2>测试视频 1: 2.1前端开发环境.mp4</h2>
        <video id="video1" controls preload="metadata">
            <source src="/public/chap02/videos/2.1前端开发环境.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <div id="status1" class="status info">正在加载视频...</div>
    </div>

    <div class="video-container">
        <h2>测试视频 2: 2.2Vue项目创建.mp4</h2>
        <video id="video2" controls preload="metadata">
            <source src="/public/chap02/videos/2.2Vue项目创建.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <div id="status2" class="status info">正在加载视频...</div>
    </div>

    <div class="video-container">
        <h2>测试视频 3: 2.3Vue项目结构.mp4</h2>
        <video id="video3" controls preload="metadata">
            <source src="/public/chap02/videos/2.3Vue项目结构.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <div id="status3" class="status info">正在加载视频...</div>
    </div>

    <script>
        function setupVideoTest(videoId, statusId) {
            const video = document.getElementById(videoId);
            const status = document.getElementById(statusId);
            
            video.addEventListener('loadstart', () => {
                status.textContent = '开始加载视频...';
                status.className = 'status info';
            });
            
            video.addEventListener('loadedmetadata', () => {
                status.textContent = `视频元数据加载成功 - 时长: ${Math.round(video.duration)}秒`;
                status.className = 'status success';
            });
            
            video.addEventListener('canplay', () => {
                status.textContent = '视频可以播放';
                status.className = 'status success';
            });
            
            video.addEventListener('error', (e) => {
                const error = video.error;
                let errorMsg = '视频加载失败: ';
                switch(error.code) {
                    case 1:
                        errorMsg += '视频加载被中止';
                        break;
                    case 2:
                        errorMsg += '网络错误';
                        break;
                    case 3:
                        errorMsg += '视频解码错误';
                        break;
                    case 4:
                        errorMsg += '视频格式不支持';
                        break;
                    default:
                        errorMsg += '未知错误';
                }
                status.textContent = errorMsg;
                status.className = 'status error';
                console.error('Video error:', error);
            });
        }

        // 设置所有视频的测试
        setupVideoTest('video1', 'status1');
        setupVideoTest('video2', 'status2');
        setupVideoTest('video3', 'status3');

        // 页面加载完成后的信息
        window.addEventListener('load', () => {
            console.log('测试页面加载完成');
            console.log('当前页面URL:', window.location.href);
            console.log('视频源URL示例:', document.querySelector('video source').src);
        });
    </script>
</body>
</html>